<template>
  <!-- 页面弹框部分 -->
  <el-dialog v-model="dialogVisible" :title="dialogTitle">
    <UiForm v-bind="formConfig" v-model:formData="modalForm" @handleFormItemChange="handleFormItemChange"
      ref="uiFormRef">
      <template #custom-slot>
        <!-- 此处可添加带栅格布局的自定义组件 -->
        <el-button type="primary">此处可添加带栅格布局的自定义组件</el-button>
      </template>
    </UiForm>
    <template #footer>
      <el-button type="primary" @click="confirm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="js">
import { ref } from "vue"
import { formConfig } from "./config/form.config"
import { initFormData } from "@/utils/init"

const dialogVisible = ref(true)

const dialogTitle = "测试"

const uiFormRef = ref()

// 根据formConfig 生成查询表单基础数据
const modalForm = ref(initFormData(formConfig.formItems))

// 表单每一选项change事件
const handleFormItemChange = (item, value) => {
  console.log(`表单当前选项对应的值->value`, value)
  console.log(`表单当前选项->item`, item)
}

// 确定
const confirm = () => {
  uiFormRef.value?.validateForm((valid) => {
    if (valid) {
      dialogVisible.value = false;
      console.log(`提交表单--->`, modalForm.value)
    }
  });
}

const cancel = () => {
  dialogVisible.value = false
}

</script>
<style scoped lang="scss">
.custom {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}
</style>